<template>
	<view class="wrap beijing fc-h">
		<view class="loging-logo">
			<img style="width: 100%;height: 100%" :src="logoSrc" alt="" sizes="" />
		</view>

		<view class="flex1 fc-h">
			<view class="tab-bar fcc J-nav-tab">
				<a id="c_dh1" class="tab click " :class="{ on: isUserLoginTab }" @click="switchToUserLoginTab">
					<view>用户登录</view>
				</a>
			</view>

			<view>
				<view class="login-form" id="countLogin">
					<view class="input-row input-user">
						<view class="icon fcc">
							<img :src="userIconSrc" alt="">
						</view>
						<u-input v-model="phoneNumber" type="text"  maxlength="11" placeholder="请输入手机号" />
					</view>
					<view class="input-row input-pwd">
						<view class="icon fcc">
							<img :src="passwordIconSrc" alt="">
						</view>
						<u-input v-model="password" type="password"   placeholder="请输入登录密码" />
					</view>
					<view class="input-row input-code">
						<view class="icon fcc">
							<img :src="codeIconSrc" alt="">
						</view>
						<u-input v-model="captcha" type="text" maxlength="4"  placeholder="请输入图形验证码" />
						<view class="code fcc">
							<img :src="captchaSrc" alt="验证码,看不清楚?请点击刷新验证码" border="1" id="c_yzm_zh" class="click"
								@click="refreshCaptcha" width="120px">
						</view>
					</view>
					<view class="forgot-row fc-bet">
						<text @tap="resign()">注册账号</text>
						<text>找回密码</text>
					</view>
					<button type="button" class="btn-blue fcc" @click="loginUser">立即登录</button>
					<view class="login-xieyi fcc">
						登录即代表阅读并同意 <a href="/index_guize/6" class="fcc"><span>《服务协议》</span></a>
					</view>
				</view>

				<!-- Add similar code for the "telLogin" section here -->

			</view>
		</view>
		<view class="foot-links fcc">
			<a href="https://www.baidu.com/?name=未登录&tel=未登录" class="fcc">
				<img :src="kefuImgSrc" alt="">
				<text>咨询客服</text>
			</a>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import request from 'request';
	export default {
		data() {
			return {
				isUserLoginTab: true,
				phoneNumber: '',
				password: '',
				captcha: '',
				logoSrc: '../static/d211bd1765a6b9715b8ba8c4812e754a.png',
				userIconSrc: '../static/img/ipt-user.png',
				passwordIconSrc: '../static/img/ipt-pwd.png',
				codeIconSrc: '../static/img/ipt-code.png',
				captchaSrc: '',
				kefuImgSrc: '../static/img/img-kefu.png',
				uToast: ''
			};
		},
		computed: {

		},
		mounted() {
			this.getcapth()
		},
		methods: {
			async getcapth() {

				// const data=await this.$request.get('/cgt-user/captcha', {})
				// console.log(data);

				const res = await uni.request({
					url: 'http://206.237.30.121:3432/CatUser/captcha', // 你的后端登录接口地址
					method: 'GET',

					header: {
						'Content-Type': 'application/json', // 请求头信息
					},
				});
				console.log(res);
				if (res.data.code == 200) {

					this.captchaSrc = 'data:image/jpeg;base64,' + res.data.data.captchaImage;
				}

			},
			switchToUserLoginTab() {
				this.loginUser()
				this.isUserLoginTab = true;
			},
			refreshCaptcha() {
				this.getcapth()
			},
			async loginUser() {
				const data = {
					user_phone: this.phoneNumber,
					user_password: this.password,
					captcha: this.captcha // 将用户输入的验证码一起发送
				}
				try {
					const response = await uni.request({
						url: 'http://206.237.30.121:3432/CatUser/login', // 你的后端登录接口地址
						method: 'POST',
						data: data,
						header: {
							'Content-Type': 'application/json', // 请求头信息
						},
					});
					console.log(response);
					if (response.data.success) {
						// 登录成功，处理响应数据
						const userData = response.data.data.user; // 获取用户数据
						const token = response.data.token; // 获取登录 token
						// 在登录成功后
						this.$store.dispatch('setUser', userData);
						if(this.$store.state.cattoken==null){
							 this.$store.commit('setVuexToken',token)	
						}
						
						
						console.log(this.$store.state.cattoken);

						this.$refs.uToast.show({
							type: 'success',
							title: '成功主题(带图标)',
							message: response.data.message,
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'

						})
						uni.switchTab({
							url: '/pages/tabBar/my/index'
						});
				

						// 这里可以处理登录成功后的逻辑，例如保存用户数据和 token
					} else {
						// 登录失败，处理错误信息
						console.log('登录失败:', response.data.message);
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							title: '失败主题',
							message: response.data.message,
							iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'

						})
						// 这里可以处理登录失败后的逻辑 
					}
				} catch (e) {
					console.log('登录请求失败:', e);
				}
				// Implement the login logic here
				// const data=await this.$request.post('/cgt-user/login', {user_phone: param.user_phone,
				//     user_password: param.user_password})
				// console.log(data);
			},
			resign() {
				uni.redirectTo({
					url: '/pages/resign/index'
				});
			}

		},
	};
</script>

<style scoped>
	/* Add your CSS styles here */
	.beijing,
	.bggrey,
	.betRecord {
		background: linear-gradient(186deg, #dff1ff 0%, #d0e3f1 100%);
	}

	.loging-logo {
		height: auto;
		width: auto;
		display: block;
		width: 7rem;
		margin: 0 auto;

	}

	.tab-bar {
		color: #0b6fc0;
		text-align: center;
	}

	.login-form {
		padding-top: 1rem;
		width: 12.48rem;
		margin: 0 auto
	}

	.jtab {
		display: block;
		height: 0.2rem;
		width: 4rem;
		background: #0b6fc0;
		box-shadow: 0px 0.2rem 0.36rem 0px rgba(11, 111, 192, 0.23);
		margin: 0 auto;

		border-radius: 0.3rem;
		margin-top: 0.2rem;
	}

	.input-row {
		height: 1.60rem;
		border-radius: 0.4rem;
		display: flex;
		align-items: center;
		background: #f8fbfe;
		justify-content: space-between;
		margin-top: 0.5rem;

	}

	.login-form .input-row input {
		flex: 1;
		margin-right: 0.4rem;
		display: block;
		font-size: 0.56rem;
		font-weight: 300;
		letter-spacing: 0px;
		border: 0;
		text-align: left;
		vertical-align: top;
	}

	.btn-blue,
	.zc-box .button-row .btn-blue,
	.c_anniu {
		background: #0b6fc0;
		box-shadow: 0px 0.2rem 0.36rem 0px rgba(11, 114, 193, 0.65);
		color: rgba(255, 255, 255, 1);
	}

	.btn-blue {
		width: 12.48rem;
		height: 1.6rem;
		opacity: 1;
		font-size: 0.64rem;
		font-weight: 300;
		letter-spacing: 0px;
		border-radius: 0.4rem;
		border: 0;
		cursor: pointer;
		text-align: center;
		vertical-align: top;
	}

	.fcc {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.login-form .forgot-row {
		padding: 0.48rem 0;
		margin-bottom: 0.5rem;
	}

	.fc-bet {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.login-xieyi {
		padding-top: 0.56rem;
		font-size: 0.52rem;
		font-weight: 300;
		letter-spacing: 0px;
		color: #010101;
	}

	.icon {
		width: 1.52rem;
		height: 1.38rem;

	}

	.login-form .icon img {
		width: 0.76rem;
		height: 0.82rem;
		object-fit: contain;
	}

	.foot-links {
		padding-bottom: 1.24rem;
		padding-top: 1.24rem;
	}

	.foot-links img {
		display: block;
		width: 0.96rem;
		height: 0.96rem;
		margin-right: 0.18rem;
	}
</style>